<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui" xmlns:ui="http://java.sun.com/jsf/facelets">
<h:head>
	<title>配置管理面板</title>
	<script type="text/javascript">
	$(document).on("keydown", ".ui-cell-editor-input input", function(event) {
	    if (event.keyCode == 13) {
	        $(this).closest("tr").find(".ui-row-editor .ui-icon-check").click();
	    }
	});
	</script>
</h:head>
<h:body style="padding:10px;">
	<h:form id="messageBox">
		<p:growl id="messages" showDetail="true" life="2000" />
		<p:confirmDialog global="true" showEffect="fade" hideEffect="explode" style="font-size:smaller;">
			<p:commandButton value="Yes" type="button" styleClass="ui-confirmdialog-yes" icon="ui-icon-check" />
			<p:commandButton value="No" type="button" styleClass="ui-confirmdialog-no" icon="ui-icon-close" />
		</p:confirmDialog>
	</h:form>
	<p:dialog header="应用ROOT节点" widgetVar="authPanel" modal="true" resizable="false" appendTo="@(body)" style="font-size:small;">
		<h:form id="authNode">
			<h:panelGrid columns="2">
				<h:outputText value="Node: "></h:outputText>
				<p:autoComplete id="auth_node_name" value="#{nodeAuthMB.nodeName}" completeMethod="#{nodeAuthMB.complete}" required="true"
					validatorMessage="Path must be like /xxx/yyy format." size="30">
					<f:validateRegex pattern="^(\/[^/]+)+" />
				</p:autoComplete>

				<h:outputText value="Password: "></h:outputText>
				<p:password id="auth_password" value="#{nodeAuthMB.password}" required="true" size="30" />

				<p:commandButton value="连接节点" actionListener="#{nodeAuthMB.checkAuth}" update="@(form)" onsuccess="PF('authPanel').hide()" style="font-size:small" />

				<h:outputText value="密码为节点的值, 使用SHA1 HEX加密, 请手动设置." style="color:red;" />
			</h:panelGrid>
		</h:form>
	</p:dialog>
	<!-- Property Group Upload -->
	<p:dialog header="Configuration Upload" widgetVar="uploadPanel" modal="true" width="550" resizable="false" appendTo="@(body)"
		style="font-size:small;">
		<h:form id="fileUploadForm">
			<p:fileUpload id="fileUpload" fileUploadListener="#{propertyGroupMB.propertyGroupUpload}" dragDropSupport="false" multiple="true"
				allowTypes="/^.*\.properties$/" update=":messageBox:messages,:authedNodeForm:propertyGroups" previewWidth="0"
				style="margin: 10px; font-size:small" oncomplete="PF('uploadPanel').hide()" />
		</h:form>
	</p:dialog>
	<!-- Property Zip Package Upload -->
	<p:dialog header="Configuration Group Upload" widgetVar="uploadZip" modal="true" width="550" resizable="false" appendTo="@(body)"
		style="font-size:small;">
		<h:form id="zipUploadForm">
			<p:fileUpload id="fileUpload" fileUploadListener="#{propertyGroupMB.propertyZipUpload}" dragDropSupport="false" multiple="false"
				allowTypes="/^.*\.zip$/" update=":messageBox:messages,:authedNodeForm:propertyGroups" previewWidth="0" style="margin: 10px; font-size:small"
				oncomplete="PF('uploadZip').hide()" />
		</h:form>
	</p:dialog>
	<!-- Property Zip Package Upload @Deprecated -->
	<p:dialog header="Configuration Group Upload" widgetVar="uploadZipOld" modal="true" width="550" resizable="false" appendTo="@(body)"
		style="font-size:small;">
		<h:form id="zipUploadOldForm">
			<p:fileUpload id="fileUploadOld" fileUploadListener="#{propertyGroupMB.propertyZipUploadOld}" dragDropSupport="false" multiple="false"
				allowTypes="/^.*\.zip$/" update=":messageBox:messages,:authedNodeForm:propertyGroups" previewWidth="0" style="margin: 10px; font-size:small"
				oncomplete="PF('uploadZipOld').hide()" />
		</h:form>
	</p:dialog>
	<!-- Create Version -->
	<p:dialog header="Version Creation" widgetVar="createVersion" modal="true" width="250" resizable="false" appendTo="@(body)" style="font-size:small;">
		<h:form id="createVersionForm">
			<p:inputText id="createVersion" binding="#{versionMB.versionToBeCreatedInput}" required="true" validatorMessage="版本号只允许使用数字,字母,下划线和点">
				<f:validateRegex pattern="^[\w\.]+" />
			</p:inputText>
			<p:commandButton actionListener="#{versionMB.createVersion}" icon="ui-icon-check" update="@(form)"
				oncomplete="#{propertyGroupMB.refreshGroup()};PF('createVersion').hide()" style="margin-left:10px;" />
		</h:form>
	</p:dialog>
	<!-- Clone Version -->
	<p:dialog header="Clone Creation" widgetVar="cloneVersion" modal="true" width="250" resizable="false" appendTo="@(body)" style="font-size:small;">
		<h:form id="cloneVersionForm">
			<p:inputText id="cloneVersion" binding="#{versionMB.versionToCloneInput}" required="true" validatorMessage="版本号只允许使用数字,字母,下划线和点">
				<f:validateRegex pattern="^[\w\.]+" />
			</p:inputText>
			<p:commandButton actionListener="#{versionMB.cloneVersion}" icon="ui-icon-check" update="@(form)" oncomplete="PF('cloneVersion').hide()"
				style="margin-left:10px;" />
		</h:form>
	</p:dialog>
	<p:layout fullPage="true">
		<p:layoutUnit position="north" size="85" style="border:0px;">
			<h:form id="authedNodeInfo">
				<p:toolbar style="margin:10px;">
					<p:toolbarGroup align="left" style="vertical-align:middle;">
						<p:commandButton type="button" value="切换根节点" onclick="PF('authPanel').show()" style="font-size:small;" />
						<p:separator style="margin: 0px 5px 0px 5px;" />
						<p:outputLabel id="authedNodeView" value="#{nodeAuthMB.authedNode}" style="margin-left:10px;" />
					</p:toolbarGroup>
					<p:toolbarGroup align="right" style="vertical-align:middle;">
						<p:outputLabel for="versionSelector" value="版本:" style="margin-right: 6px;font-size: medium;" />
						<p:selectOneMenu id="versionSelector" value="#{versionMB.selectedVersion}" disabled="#{empty nodeAuthMB.authedNode}" style="font-size:small;vertical-align:middle;">
							<p:ajax listener="#{propertyGroupMB.refreshGroup}" event="change" update="@(form)" />
							<f:selectItem itemLabel="Select Version..." />
							<f:selectItems value="#{versionMB.versions}" />
						</p:selectOneMenu>
						<p:separator style="margin: 0px 5px 0px 5px;" />
						<p:commandLink id="createVersionBt" type="button" value="新建版本" onclick="PF('createVersion').show()" style="font-size:small;margin-right:6px;"
							disabled="#{empty nodeAuthMB.authedNode}" />
						<p:commandLink id="cloneBt" type="button" value="克隆版本" onclick="PF('cloneVersion').show()" style="font-size:small;margin-right:6px;"
							disabled="#{empty nodeAuthMB.authedNode || empty versionMB.selectedVersion}" />
						<p:separator style="margin: 0px 5px 0px 5px;" />
						<p:commandLink id="exportAllBt" type="button" value="导出(ZIP)" ajax="false" style="font-size:small;margin-right:6px;"
							disabled="#{empty nodeAuthMB.authedNode || empty versionMB.selectedVersion}">
							<p:fileDownload value="#{propertyExportMB.generateFileAll()}" />
						</p:commandLink>
						<p:commandLink id="importAllBt" type="button" value="导入(ZIP)" style="font-size:small;margin-right:6px;"
							disabled="#{empty nodeAuthMB.authedNode || empty versionMB.selectedVersion}" onclick="PF('uploadZip').show()" />
						<!-- @Deprecated -->
						<p:commandLink id="importAllOldBt" type="button" value="导入v2.x版本数据(ZIP)" style="font-size:small;margin-right:6px;"
							disabled="#{empty nodeAuthMB.authedNode || empty versionMB.selectedVersion}" onclick="PF('uploadZipOld').show()" />
					</p:toolbarGroup>
				</p:toolbar>

				<p:separator style="margin: 0px 10px 0px 10px;" />
			</h:form>
		</p:layoutUnit>
		<p:layoutUnit position="south" size="50" style="border:0px;">
			<h:outputText value="Copyright (C) WangYuxuan@DangDang" />
		</p:layoutUnit>
		<p:layoutUnit position="west" size="400" style="border:0px;top:85px;">
			<h:form id="authedNodeForm">
				<p:dataTable id="propertyGroups" value="#{propertyGroupMB.propertyGroups}" var="propertyGroup" style="margin: 10px; font-size:smaller;"
					rowKey="#{propertyGroup}" selection="#{propertyGroupMB.selectedGroup}" selectionMode="single">
					<p:ajax event="rowSelect" update=":nodePropData:nodePropTable,:nodePropForm:createProperty" listener="#{propertyGroupMB.onMenuSelected}" />
					<f:facet name="header">Property Groups</f:facet>
					<p:column headerText="Group Name">
						#{propertyGroup}
					</p:column>
					<p:column headerText="Operations">
						<p:commandLink value="Remove" update="@(form)" actionListener="#{propertyGroupMB.deleteNode(propertyGroup)}"
							style="font-size:small; margin: 10px;">
							<p:confirm header="Confirmation" message="确认删除配置组?" icon="ui-icon-alert" />
						</p:commandLink>
						<p:commandLink id="downloadLink" value="Export" ajax="false" icon="ui-icon-arrowthichk-s" style="font-size:small; margin: 10px;">
							<p:fileDownload value="#{propertyExportMB.generateFile(propertyGroup)}" />
						</p:commandLink>
					</p:column>
				</p:dataTable>
				<p:inputText id="newPropertyGroup" size="12" style="font-size:smaller; margin: 10px;" binding="#{propertyGroupMB.newPropertyGroup}"
					validatorMessage="Path must start with / character">
					<f:validateRegex pattern="[^/]+" />
				</p:inputText>
				<p:commandButton id="createNode" value="创建" disabled="#{empty nodeAuthMB.authedNode || empty versionMB.selectedVersion}" update="@(form)"
					actionListener="#{propertyGroupMB.createNode}" style="margin: 10px; font-size:small" />
				<p:commandButton id="uploadNode" type="button" value="上传" disabled="#{empty nodeAuthMB.authedNode || empty versionMB.selectedVersion}"
					onclick="PF('uploadPanel').show()" style="font-size:small;" />
			</h:form>
		</p:layoutUnit>
		<p:layoutUnit position="center" style="border:0px;">
			<h:form id="nodePropForm">
				<h:outputLabel value="Key:" for="newPropName" style="font-size:smaller; margin: 10px;" />
				<p:inputText id="newPropName" required="true" size="12" style="font-size:smaller;" binding="#{nodeDataMB.newPropName}"
					validatorMessage="Key must not contains / character">
					<f:validateRegex pattern="[^/]+" />
				</p:inputText>

				<h:outputLabel value="Value:" for="newPropValue" style="font-size:smaller; margin: 10px;" />
				<p:inputText id="newPropValue" required="true" size="12" style="font-size:smaller;" binding="#{nodeDataMB.newPropValue}" />

				<h:outputLabel value="注释:" for="newCommentValue" style="font-size:smaller; margin: 10px;" />
				<p:inputText id="newCommentValue" required="false" size="20" style="font-size:smaller;" binding="#{nodeDataMB.newCommentValue}" />

				<p:commandButton id="createProperty" value="创建" partialSubmit="true" disabled="#{empty nodeDataMB.selectedNode}"
					update=":messageBox:messages,:nodePropData:nodePropTable,:nodePropForm:newPropName,:nodePropForm:newPropValue,:nodePropForm:newCommentValue"
					actionListener="#{nodeDataMB.createProperty}" style="margin: 10px; font-size:small" />
			</h:form>
			<h:form id="nodePropData">
				<p:separator style="margin: 0px 10px 20px 10px;" />
				<p:dataTable id="nodePropTable" var="nodeProp" editable="true" value="#{nodeDataMB.nodeProps}" style="margin:10px;font-size:small">
					<p:ajax event="rowEdit" listener="#{nodeDataMB.onPropertyEdit}" update=":messageBox:messages" />
					<p:column style="width:6%">
						<p:rowEditor />
						<h:inputHidden value="#{nodeProp.oriName}" />
					</p:column>
					<p:column style="width:6%">
						<p:commandLink update=":messageBox:messages,:nodePropData:nodePropTable" actionListener="#{nodeDataMB.deleteProperty(nodeProp.name)}">
							<h:outputText styleClass="ui-icon ui-icon-close" />
							<p:confirm header="Confirmation" message="确认删除配置?" icon="ui-icon-alert" />
						</p:commandLink>
					</p:column>
					<p:column headerText="Property Key" style="width:20%">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{nodeProp.name}" style="width:96%; word-wrap: break-word; word-break: break-all;" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{nodeProp.name}" style="width:96%" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Property Value">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{nodeProp.value}" style="width:96%; word-wrap: break-word; word-break: break-all;" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{nodeProp.value}" style="width:96%" />
							</f:facet>
						</p:cellEditor>
					</p:column>
					<p:column headerText="Comment">
						<p:cellEditor>
							<f:facet name="output">
								<h:outputText value="#{nodeProp.comment}" style="width:96%; word-wrap: break-word; word-break: break-all;" />
							</f:facet>
							<f:facet name="input">
								<p:inputText value="#{nodeProp.comment}" style="width:96%" />
							</f:facet>
						</p:cellEditor>
					</p:column>
				</p:dataTable>
			</h:form>
		</p:layoutUnit>
	</p:layout>
</h:body>
</html>